<template>
  <div class="container">
    <h1>Insert Data</h1>
    <div class="form-group1">
      <label for="itemName">Item Name:</label>
      <input type="text" id="itemName" v-model="item_name" required />
    </div>
    <div class="form-group2">
      <label for="value">Value:</label>
      <input type="text" id="value" v-model="value" required />
    </div>
    <button @click="insertData">Insert Data</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const item_name = ref('')
const value = ref('')

function insertData() {
  fetch('/api/insert', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ item_name: item_name.value, value: value.value })
  })
    .then((response) => response.json())
    .then((data) => {
      alert(data.message)
    })
    .catch((error) => {
      console.error('Error:', error)
    })
}
</script>

<style scoped>
/* Add your styles here */
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
  width: 100%;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin: 50px auto;
  .form-group1 label {
    font-size: 18px;
    margin-left: -55px;
  }
}

button {
  padding: 10px 15px;
  margin-top: 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
